import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Myhome(),
    );
  }
}

class Myhome extends StatelessWidget {
  const Myhome({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Center(
          child: Text(
            "商品列表",
            textDirection: TextDirection.ltr,
            style: TextStyle(color: Colors.deepPurpleAccent),
          ),
        ),
        backgroundColor: Colors.green,
      ),
      body: Myhomebody(),
    );
  }
}

class Myhomebody extends StatelessWidget {
  const Myhomebody({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: [
        iteme(
            "Apple", "macbook", "http://180.76.138.108/images/xingkong10.jpg"),
        SizedBox(
          height: 3,
        ),
        iteme(
            "Apple", "macbook", "http://180.76.138.108/images/xingkong10.jpg"),
        SizedBox(
          height: 3,
        ),
        iteme(
            "Apple", "macbook", "http://180.76.138.108/images/xingkong10.jpg"),
      ],
    );
  }
}

class iteme extends StatelessWidget {
  final String title;
  final String desc;
  final String imageUrl;
  final style1 = TextStyle(color: Colors.orange);

  iteme(this.title, this.desc, this.imageUrl);

  @override
  Widget build(BuildContext context) {
    return Container(
      //通过快捷键设置布局包裹 option（alt）+ 回车
      padding: EdgeInsets.all(8), //设置边框内边距
      decoration: BoxDecoration(
          border: Border.all(
              width: 4, //设置边框的宽带
              color: Colors.deepPurpleAccent //设置边框颜色
          )),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        //因为Column是纵向拍布的 所以主轴是垂直的。改变交叉轴   crossAxisAlignment: CrossAxisAlignment.center,靠着左center改start右面改为end
        children: [
          Text(
            title,
            style: style1,
          ),
          //设置margin
          SizedBox(
            height: 8,
          ),//设置每个item的间距
          Text(
            desc,
            style: style1,
          ),
          SizedBox(
            height: 10,
          ),
          Image.network(imageUrl),
        ],
      ),
    );
  }
}
